// src/recipe-detail/RecipeAuthorCard.tsx
import React from 'react';
import { Card, Avatar, Button, Typography } from 'antd';
import { UserOutlined, CheckOutlined, PlusOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

const { Text } = Typography;

interface RecipeAuthorCardProps {
  authorId: number;
  avatarUrl?: string;
  authorName?: string;
  onFollow?: () => void;
  onVisitAuthorPage?: () => void;
  isFollowing?: boolean;
  followLoading?: boolean;
  colorConfig?: {
    primary: string;
    primaryDark: string;
    border: string;
    background: string;
  };
  isCurrentUser?: boolean; // 是否是当前用户
}

const RecipeAuthorCard: React.FC<RecipeAuthorCardProps> = ({
  authorId,
  avatarUrl = 'https://picsum.photos/50/50?random=1',
  authorName = '未知作者',
  onFollow,
  onVisitAuthorPage,
  isFollowing = false,
  followLoading = false,
  colorConfig = {
    primary: '#e8d9c7',
    primaryDark: '#8b4513',
    border: '#d4b896',
    background: '#f8f4f0'
  },
  isCurrentUser = false // 默认不是当前用户
}) => {
  const navigate = useNavigate();

  // 处理点击作者信息
  const handleAuthorClick = () => {
    if (isCurrentUser) {
      // 如果是当前用户，跳转到mine页面
      navigate('/mine');
    } else if (onVisitAuthorPage) {
      // 如果不是当前用户，使用传入的回调
      onVisitAuthorPage();
    } else {
      // 默认行为：跳转到用户主页
      navigate(`/user/${authorId}`);
    }
  };

  return (
    <Card
      style={{
        background: 'rgba(255, 255, 255, 0.9)',
        borderRadius: '12px',
        border: `1px solid ${colorConfig.border}`,
        padding: '20px 24px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.05)',
        marginBottom: '20px',
      }}
      bodyStyle={{ padding: 0 }}
    >
      <div style={{ 
        display: 'flex', 
        alignItems: 'center', 
        justifyContent: 'space-between',
        width: '100%'
      }}>
        {/* 作者信息区域 - 可点击 */}
        <div 
          style={{ 
            display: 'flex', 
            alignItems: 'center', 
            gap: '20px',
            cursor: 'pointer',
            flex: 1
          }}
          onClick={handleAuthorClick}
        >
          {/* 更大的头像 - 80px */}
          <Avatar 
            src={avatarUrl} 
            size={80}  // 增大头像尺寸到80px
            icon={<UserOutlined />}
            style={{ 
              backgroundColor: colorConfig.primary,
              border: `3px solid ${colorConfig.border}`,
              flexShrink: 0,
              fontSize: '32px'  // 图标也相应增大
            }}
            onError={() => {
              // 头像加载失败时使用默认图标
              return false;
            }}
          />
          
          {/* 作者信息 - 只显示用户名 */}
          <div style={{ minWidth: 0 }}>
            <Text 
              strong 
              style={{ 
                fontSize: '18px',  // 增大字体
                color: colorConfig.primaryDark,
                display: 'block',
                marginBottom: '4px',
                lineHeight: '1.2'
              }}
            >
              {authorName}
              {isCurrentUser && (
                <span style={{ 
                  fontSize: '12px', 
                  color: '#666', 
                  marginLeft: '8px',
                  fontWeight: 'normal'
                }}>
                  (我)
                </span>
              )}
            </Text>
          </div>
        </div>
        
        {/* 关注按钮 - 如果是当前用户则不显示 */}
        {onFollow && !isCurrentUser && (
          <Button 
            type={isFollowing ? "default" : "primary"}
            size="large"  // 增大按钮尺寸
            onClick={(e) => {
              e.stopPropagation(); // 防止触发作者信息区域的点击事件
              onFollow();
            }}
            loading={followLoading}
            icon={isFollowing ? <CheckOutlined /> : <PlusOutlined />}
            style={{
              borderRadius: '20px',
              backgroundColor: isFollowing ? '#f0f0f0' : colorConfig.primary,
              borderColor: isFollowing ? '#d9d9d9' : colorConfig.primary,
              color: isFollowing ? '#666' : colorConfig.primaryDark,
              fontWeight: 'bold',
              padding: '8px 20px',
              height: 'auto',
              minWidth: '100px',
              flexShrink: 0,
              fontSize: '14px'
            }}
          >
            {isFollowing ? '已关注' : '关注'}
          </Button>
        )}
      </div>
    </Card>
  );
};

export default RecipeAuthorCard;